<template>
    <div>
        <slider :announcement="announcement" :sliders="sliders"></slider>
        <booklist :books="books" heading="最新更新"
                  @select="preview($event)"></booklist>
        <booklist :books="recommended"
                  heading="编辑推荐"
                  @select="preview($event)"></booklist>
    <modal-dialog ref="dialog">
        <div slot="heading"></div>
        <div>
            <div v-if="selected">
                <h2>{{ selected.title }}</h2>
            </div>
        </div>
    </modal-dialog>
    </div>
</template>
<script type="text/ecmascript-6">
    import slider from "./slider.vue"
    import booklist from "./BookList.vue"
    import ModalDialog from "./dialog.vue"

    export default{
        components: {slider, booklist,ModalDialog},
        beforeCreate(){
          console.log("beforeCreate");
        },
        mounted(){
          console.log("mounted");
        },
        created(){
            this.$http.get("/data.json").then(
                    res=> {
                        console.log(res);
                        this.books = res.body.books;
                        this.recommended = res.body.recommended;
                        this.announcement = res.body.announcement;
                        this.sliders = res.body.sliders;
                        console.log("get slider");
                    }
            )
        },
        data(){
            return {
                books: [],
                recommended: [],
                announcement: '',
                sliders: [],
                selected:undefined
            }
        },
        methods: {
            preview (book) {
                this.selected = book
                this.$refs.dialog.open()
            }
        }
    }
</script>
